//表格相关组合式API
import {ref, computed, onMounted, watch} from "vue";
import {useStore} from 'vuex'
import {getTodosApi, updateStatusApi, updateContentApi, addTodoApi, deleteAllCancelApi} from '../axios/API'
import {ElMessage} from "element-plus";

export default function () {
    //vuex
    let store = useStore()
    //页表数据
    let todoList = ref([])
    //分页信息
    let pageInfo = ref({
        //当前页 监听变化，变化后重新发送请求
        currenPage: 1,
        //总数 动态传入
        total: 0,
        //每页条数 固定写死，后期可能会动态。
        pageSize: 10
    })
    //标签格式 这里我觉得不应该这么写，但现在我不会其他的写法了。计算属性也可以完成！
    let tagType = ref('')
    //内容显示对话框
    let contentDialog = ref({
        //是否显示
        isShowContent: false,
        //标题
        title: '',
        //具体内容
        content: '',
        id: -1

    })
    //新增时todo表单内容
    let todoInfo = ref({
        isShow: false,
    })
    //新增todo表单标记
    let addTodoFormTag = ref(null)
    //新增todo的校验规则
    let addTodoRule = ref({
        title: [{required: true, message: '请输入标题', trigger: 'blur'}]
    })

    //逆天，我服了。监听一个由reactive定义的数据中的某个值，需要这么写
    watch(() => pageInfo.value.currenPage, (val) => {
        //重新请求数据
        getTodos()
    }, {deep: true})

    //获取数据
    async function getTodos() {
        let {data} = await getTodosApi({
            "pageNum": pageInfo.value.currenPage,
            "pageSize": pageInfo.value.pageSize,
        })
        //数组赋值
        todoList.value = data.todos.records
        //分页信息赋值
        pageInfo.value.total = data.todos.total
        //代做任务保存到vuex中
        store.commit('todoListStore/UPDATE_BACKLOGNUMBER', data.todoCount)
    }

    //获取标签格式  这里我觉得不应该这么写，但现在我不会其他的写法了。计算属性也可以完成！
    function getTagType(status) {
        switch (status + '') {
            case '1':
                //待办
                return {
                    type: '',
                    content: '待办'
                }
            case '2':
                //已完成
                return {
                    type: 'success',
                    content: '已完成'
                }
            case '3':
                //放弃
                return {
                    type: 'danger',
                    content: '取消'
                }
            default:
                return {
                    type: '',
                    content: '未知'
                }
        }
    }

    //修改todo状态
    async function updateTodoStatus(id, status) {
        // console.log(id,status)
        let {data} = await updateStatusApi({
            id, status
        })
        // console.log('!!',data)
        if (data.status === '200') {
            ElMessage.success(`${data.info}`)
        } else {
            ElMessage.error('未知错误，请联系管理员。')
        }
        getTodos()
    }

    //修改todo内容
    async function updateContent(id, content) {
        let {data} = await updateContentApi({
            id, content
        })
        if (data.status === '200') {
            ElMessage.success(`${data.info}`)
        } else {
            ElMessage.error('未知错误，请练习管理员')
        }
    }

    //内容对话框初始化
    function initContentDialog(info) {
        //打开弹窗
        contentDialog.value.isShowContent = true
        // console.log(info)
        //绑定数据
        contentDialog.value.title = info.title
        contentDialog.value.content = info.content
        contentDialog.value.id = info.id
    }

    //保存修改内容
    async function saveTodosContent() {
        let {data} = await updateContentApi({
            id: contentDialog.value.id,
            content: contentDialog.value.content
        })
        if (data.status === '200') {
            ElMessage.success(`${data.info}`)
        } else {
            ElMessage.error('未知错误，请练习管理员')
        }
        contentDialog.value.isShowContent = false
        getTodos()
    }

    //内容对话框关闭前销毁数据
    function destroyContentDialog() {
        contentDialog.value.isShowContent = false
        contentDialog.value.title = ''
        contentDialog.value.content = ''
        contentDialog.value.id = -1
    }

    //新增todoInfo
    function addTodoInfo() {
        addTodoFormTag.value.validate(async (valid) => {
            if (valid) {
                let todo = {...todoInfo.value}
                delete todo.isShow
                let {data} = await addTodoApi(todo)
                if (data.status === '200') {
                    ElMessage.success(`${data.info}`)
                } else {
                    ElMessage.error('未知错误，请练习管理员')
                }
                todoInfo.value.isShow = false
                getTodos()
            }
        })
    }

    //新增对话框关闭前销毁数据
    function destroyAddDialog() {
        todoInfo.value = {
            isShow: false
        }
        //移除该表单项的校验结果
        addTodoFormTag.value.resetFields()
    }

    //删除所有已完成
    function deleteAllCancel() {
        deleteAllCancelApi().then(
            response => {
                const {data} = response
                if (data.status === '200') {
                    ElMessage.success('删除成功')
                    getTodos()
                }else {
                    ElMessage.error(data.info)
                }
            }
        )
    }

    //路由组件的声明周期函数，当页面激活时
    onMounted(() => {
        getTodos()
    })


    return {
        todoList, pageInfo, getTagType, updateTodoStatus, contentDialog,
        initContentDialog, saveTodosContent, destroyContentDialog, todoInfo,
        destroyAddDialog, addTodoRule, addTodoFormTag, addTodoInfo, deleteAllCancel
    }
}
